<template>
    <div id="div">
           <div class="content-header common-search-border1" style="margin : 10px">
               <!-- TODO:点击新增用户按钮，执行handleCreate函数 -->
               <el-button type="primary" class="butAdd" @click="handleCreate"> 新增角色
               </el-button>
           </div>

       <div class="app-container">
           <div class="box common-search-border2">
               <div class="filter-container">
                   <!-- TODO: 搜索栏 -->
                   <!--
                       :inline="true	行内表单模式 (表单项横向排列)
                       :model="queryParams"  数据绑定
                        ref="queryParams" 用于找到本表单使用
                   -->
                   <el-form :inline="true" :model="queryParams" ref="queryParams"
                            class="formInfo">
                       <el-form-item label="角色名称" label-width="80px">
                           <el-input placeholder="请输入" v-model="queryParams.name"
                                     style="width: 200px;" class="filter-item"></el-input>
                       </el-form-item>
                       <el-form-item>
                           <el-button @click="handleRest">清除</el-button>
                           <el-button type="primary" class="butOK" @click="handleSearch">搜索</el-button>
                       </el-form-item>
                   </el-form>
               </div>
           </div>
           <div class="box common-table-border" style="margin:8px 0 0;">
               <!--
                   TODO: 角色列表
               -->
               <!--
                   TODO:在element中对于el-table表格标签通过data属性向表格中注入数据， :data="userList"全称写法是：v-bind:date="userList"
                   vue脚本汇总应该有一个userList来存储表格数据，我们应该将后台查询的用户数据赋值userList，然后这里通过data属性值动
                   注入到表格中
                   
                   data	显示的数据
                   fit	列的宽度是否自撑开
               -->
               <el-table
                       :data="roleList"
                       fit
                       style="width: 100%;">

                   <el-table-column label="编号" width="50px" align="center" prop="id">
                   </el-table-column>
                   <el-table-column label="角色名" align="center" prop="name">
                   </el-table-column>
                   <el-table-column label="角色关键字" align="center"  prop="keyword">
                   </el-table-column>
                   <el-table-column label="角色描述" align="center" prop="description">
                   </el-table-column>

                   <el-table-column label="操作" width="180">
                       <template slot-scope="scope">
                           <!--
                                TODO: 修改和删除
                                v-if 判断如果是admin用户就不要出现修改和删除按钮
                            -->
                           <div class="operation" v-if="scope.row.name != 'admin'">
                               <!-- 点击修改按钮执行handleUpdate函数，scope.row表示当前行对象 -->
                               <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">修改
                               </el-button>
                               <!-- TODO:点击删除按钮执行handleDeleted函数，scope.row表示当前行对象 -->
                               <el-button size="mini" type="danger" @click="handleDeleted(scope.row)"> 删除
                               </el-button>
                           </div>
                       </template>
                   </el-table-column>

               </el-table>
               <!--
                    TODO: 分页组件
                      @size-change： 当改变每页条数时触发的函数
                      @current-change：当改变页码时触发的函数
                      current-page ：默认的页码
                      :page-sizes：每页条数选择框中显示的值
                      :page-size : 默认的每页条数
                      layout： 分页组件的布局
                          total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
                      :total: 总条数

                   存放的是关于分页的数据
                      pagination: {
                       total: 0,  //总记录数，这里从数据表查询 select count(*) from...
                       pageNum: 1, // 当前页码
                       pageSize: 5 //每页显示条数
                   }
                -->
               <div class="pagination-container">
                   <el-pagination
                           class="pagiantion"
                           v-show="pagination.total>0"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="pagination.pageNum"
                           :page-sizes="[3, 5, 10, 15]"
                           :page-size="pagination.pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="pagination.total">
                   </el-pagination>
               </div>
           </div>
           <!--TODO: 新增用户弹层
                  :visible.sync 是否显示 (dialogFormVisible=true 显示, =false隐藏)
           -->
           <el-dialog title="新增角色" align="left" :visible.sync="dialogFormVisible" width="40%" top="8vh">
               <!--
                   model	表单数据对象
                   rules	表单验证规则
               -->
               <el-form label-width="120px" :model="addrole" :rules="rules" ref="form">
                   <!--
                   prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
                   -->
                   <el-form-item label="角色名称：" prop="name">
                           <!-- v-model 双向数据绑定  autocomplete=off 取消自动补全功能-->
                           <!-- 
                               当我们在浏览器中输入表单信息的时候，往往input文本输入框会记录下之前提交表单的信息，
                               以后每次只要双击 input文本输入框就会出现之前输入的文本，这样有时会觉得比较方便，
                               但有时也会暴露用户的隐藏数据，那么如何让input表单输入框不记录输入过信息的方法呢？
                               在不想使用缓存的input中添加 autocomplete=”off”
                            -->
                       <el-input v-model="addrole.name" autocomplete="off"></el-input>
                   </el-form-item>
                   <el-form-item label="角色关键字：" prop="keyword">
                       <el-input v-model="addrole.keyword" autocomplete="off"></el-input>
                   </el-form-item>
                   <el-form-item label="角色描述：" prop="keyword">
                       <el-input v-model="addrole.description" autocomplete="off"></el-input>
                   </el-form-item>
                  

               </el-form>
               <div slot="footer" class="dialog-footer">
                   <el-button @click="handleCreateCancel">取 消</el-button>
                   <!--  点击确定按钮执行handleCreateConfirm 函数将输入框输入的数据提交到后台服务器的函数-->
                   <el-button type="primary" @click="handleCreateConfirm">确 定</el-button>
               </div>
           </el-dialog>
           <!-- end -->
           <!-- 修改用户弹层:visible.sync="dialogUptFormVisible"  dialogUptFormVisible值是false表示隐藏弹框 ，值是true表示显示弹框-->
           <el-dialog title="修改角色" align="left" :visible.sync="dialogUptFormVisible" width="40%" top="8vh">
               <el-form label-width="120px" :model="updaterole" :rules="rules" ref="uptForm">
                   <el-form-item label="角色名称：" prop="name">
                       <!-- v-model="updateUser.username" 双向数据绑定。数据模型即 updateUser中的username有值了，那么视图这里就会显示值-->
                       <el-input v-model="updaterole.name" autocomplete="off"></el-input>
                   </el-form-item>
                   <el-form-item label="角色关键字：" prop="keyword">
                       <el-input v-model="updaterole.keyword" autocomplete="off"></el-input>
                   </el-form-item>
                   <el-form-item label="角色描述：" prop="description">
                       <el-input v-model="updaterole.description" autocomplete="off"></el-input>
                   </el-form-item>

                   
               </el-form>
               <div slot="footer" class="dialog-footer">
                   <el-button @click="handleUpdateCancel">取 消</el-button>
                   <!-- 确定修改，执行函数handleUpdateConfirm -->
                   <el-button type="primary" @click="handleUpdateConfirm">确 定</el-button>
               </div>
           </el-dialog>
           <!-- end -->
       </div>
   </div>
</template>

<script>
import axios from 'axios'
export default {
   data(){
       return {
           pagination: {
               total: 0,  //总条数
               pageNum: 1, // //当前页
               pageSize: 5 //每页显示条数
           },
           roleList: [],  //角色列表数据
          
           queryParams: { // 搜索条件
               name: ''
           },
           dialogFormVisible: false, // 添加窗口显示状态
           dialogUptFormVisible: false,//修改窗口显示状态
           addrole: { // 用户数据
               name: '',
               keyword: '',
               description:''
              
           },
           updaterole: { //用户的修改数据
               id: "",
               name: '',
               keyword: '',
               description:''
              
           },
           rules: { //校验规则
               name: [
                   {required: true, message: '请填写', trigger: 'blur'}
               ],
               keyword: [
                   {required: true, message: '请填写', trigger: 'blur'},
                   {type: 'keyword', message: '请输入正确的角色关键字', trigger: ['blur', 'change']}
               ],
               password: [
                   {required: true, message: '请填写', trigger: 'blur'}
               ]
           }

       }
   },
   //TODO:钩子函数，当当前页面加载的时候就会自动执行，准备数据即向后台发送请求获取数据
   created() {
          
           //查询所有的角色 TODO ?
           //  (添加用户和修改用户的时候要展示所有角色以供选择)
           this.getRoleList()
       },
       methods: {
           //TODO: 获取用户分页数据
           
           //TODO: 查询角色表
           getRoleList() {
               //TODO:这里向后端服务器发送请求，从t_role角色表中查询所有角色信息赋值给roleList: [], // 角色列表数据
               let url="/role/findAllRoses"
               axios.post(url)
                    .then(resp=>{
                      //定义变量接收响应数据
                      let obj =resp.data;
                      //判断
                      if(obj.flag){
                           //查询成功
                           //提示信息
                            this.$message({
                                   message: obj.message,
                                   type: 'success'
                                   });
                           //将响应的角色数据的容器赋值给数据模型中的roleList: []
                           this.roleList=obj.result;
                      }else{
                           //查询失败
                            this.$message.error(obj.message);
                      }
                    });

              

           },
           //将查询条件置空
           handleRest() {
               this.queryParams = {
                   name: ''
               }
           },
           //搜索
           handleSearch() {
               //将当前页码设置为1
               this.pagination.pageNum = 1;
               this.getUserList();
           },
           //每页数量改变的时候
           handleSizeChange(val) {
               this.pagination.pageSize = val;
               this.pagination.pageNum = 1;
               this.getUserList();
           },
           //当前页码改变的时候
           handleCurrentChange(val) {
               this.pagination.pageNum = val;
               this.getUserList();
           },
           // 新增用户
           handleCreate() {
               /*
                   Vue 为简化DOM获取方法提出了ref 属性和$ refs 对象。
                   一般的操作流程是:ref 绑定控件，$refs 获取控件
                   ref 绑定控件:
                   <el-form label-width="120px" :model="addUser" :rules="rules" ref="form">
                   this.$refs['form']表示获取上面的整个添加用户的form表单控件
               */
               if (this.$refs['form']) {
                   this.$refs['form'].resetFields();
               }
               //显示新增用户弹框，dialogFormVisible的值是true表示显示新增用户弹框，值是false表示隐藏弹框
               this.dialogFormVisible = true;

           },
           //新增用户确定 TODO:
           handleCreateConfirm() {
               this.$refs['form'].validate((valid) => {
                   if (valid) {
                       //添加用户表单校验通过，向后台请求添加用户的servlet
                       
                   }
               });
           },
           //新增用户取消
           handleCreateCancel() {
               this.dialogFormVisible = false;
           },
           //修改用户 数据回显
           handleUpdate(row) {//row=scope.row,表示当前行对象
               var t = this;//this表示vue对象
               if (t.$refs['uptForm']) {
                   t.$refs['uptForm'].resetFields();
               }
               //当前行对象的id值(row.id)赋值给vue中data中的updateUser中的id
               t.updaterole.id = row.id;
               t.updaterole.name = row.name;
               t.updaterole.keyword = row.keyword;
               t.updaterole.description=row.description;

              
               // dialogUptFormVisible: false,//修改窗口显示状态 默认值是false表示隐藏弹出框，值是true表示显示弹出框
               t.dialogUptFormVisible = true;

           },
           //TODO 修改用户确定 
           handleUpdateConfirm() {
               this.$refs['uptForm'].validate((valid) => {
                   if (valid) {
                       //TODO:向后台发送请求修改用户和角色，向后台提交的是数据模型中的：
                       /**
                        *  updateUser: { //用户的修改数据
                               id: "",
                               username: '',
                               email: '',
                               password: '',
                               roleIds: []
                           },
                        */
                       //1.定义变量保存地址
                       let url="/role/update";
                       //2.直接发送请求，携带的请求参数this.updateUser本身就是json格式的数据，直接传递
                       axios.post(url,this.updaterole)
                            .then(resp=>{
                               //3.定义变量接收后端的响应数据
                              let obj = resp.data;
                              //4.判断
                              if(obj.flag){
                                 //更新成功
                                 //提示信息
                               this.$message({
                               message: obj.message,
                               type: 'success'
                               });
                               //隐藏修改弹框
                               this.dialogUptFormVisible=false;
                               //再次查询
                               this.getUserList();
                              }else{
                               //更新失败
                               //提示信息
                               this.$message.error(obj.message);
                              }
                            });


                   }
               });
           },
           //修改用户取消
           handleUpdateCancel() {
               this.dialogUptFormVisible = false;
           },
           // 删除 TODO:
           handleDeleted(row) {//row就是当前行对象
               //点击确认走then,点击取消走catch
               this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
                   type: 'warning'
               }).then(() => {
                   //书写向后台发送请求的代码：delete from 表名 where id=1  前端向后台提交的是删除当前行级用户的id
               }).catch(() => {
                   this.$message.info('已取消操作!')
               });
           }
       }
}
</script>
<style>
</style>